help with CSS design

[Joe]

I'm designing a company website. I'm relatively new to CSS and I'm having
trouble creating what seems to me a very simple design:

- body background: fixed full page image
- banner: fixed, 100 pixels high, full-width, transparent background
- nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
semi-transparent tiled image background
- content box: scrolling, auto height, auto width, opaque text,
semi-transparent tiled image background
- footer: fixed, 30 px high, full width, transparent background

Here is as far as I could get in the actual design:
http://www3.telus.net/tinkernet/mockup/mockup.html

mockup:
http://www3.telus.net/tinkernet/mockup/mockup.jpg

[RoseW]

Joe wrote:
RE: body background: fixed full page image
- banner: fixed, 100 pixels high, full-width, transparent background
- nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
semi-transparent tiled image background
- content box: scrolling, auto height, auto width, opaque text,
semi-transparent tiled image background
- footer: fixed, 30 px high, full width, transparent background

Here is as far as I could get in the actual design:
http://www3.telus.net/tinkernet/mockup/mockup.html

---------
There appears to be two background images behind the content. The image of
wood with knots interferes with the readability. Either edit this repeating
image to remove the knots or leave it out.
Rose

[Arne]

Once upon a time *Joe* wrote:

I'm designing a company website. I'm relatively new to CSS and I'm having
trouble creating what seems to me a very simple design:

- body background: fixed full page image
- banner: fixed, 100 pixels high, full-width, transparent background
- nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
semi-transparent tiled image background
- content box: scrolling, auto height, auto width, opaque text,
semi-transparent tiled image background
- footer: fixed, 30 px high, full width, transparent background

Here is as far as I could get in the actual design:
http://www3.telus.net/tinkernet/mockup/mockup.html

mockup:
http://www3.telus.net/tinkernet/mockup/mockup.jpg

Check your (X)HTML with http://validator.w3.org/ and your CSS with
http://jigsaw.w3.org/css-validator/validator-uri.html

BTW. The background image (bg-about.jpg) is 262 kB and that far to
much even for broadband users.

--
/Arne

Proud User of Mozilla Suite. Get your free copy here:
*English* http://www.mozilla.org/products/mozilla1.x/
*Svenska* http://www.mozilla.se/mozilla.shtml

[Joe]

I agree with you about the current state of readability of the text, however
what I really need help with is making the page look like my mockup and have
the properties I listed in the description.

"RoseW" <wd**@NShurontel.on.ca> wrote in message
news:ls********************@nnrp1.uunet.ca...

Joe wrote:
RE: body background: fixed full page image
- banner: fixed, 100 pixels high, full-width, transparent background
- nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
semi-transparent tiled image background
- content box: scrolling, auto height, auto width, opaque text,
semi-transparent tiled image background
- footer: fixed, 30 px high, full width, transparent background

Here is as far as I could get in the actual design:
http://www3.telus.net/tinkernet/mockup/mockup.html

---------
There appears to be two background images behind the content. The image of
wood with knots interferes with the readability. Either edit this
repeating
image to remove the knots or leave it out.
Rose

[Joe]

I agree with you about size of my background file, however what I really
need help with is making the page look like my mockup and have the
properties I listed in the description.

"Arne" <us**@domain.invalid> wrote in message
news:3a*************@individual.net...

Once upon a time *Joe* wrote:

I'm designing a company website. I'm relatively new to CSS and I'm
having
trouble creating what seems to me a very simple design:

- body background: fixed full page image
- banner: fixed, 100 pixels high, full-width, transparent background
- nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
semi-transparent tiled image background
- content box: scrolling, auto height, auto width, opaque text,
semi-transparent tiled image background
- footer: fixed, 30 px high, full width, transparent background

Here is as far as I could get in the actual design:
http://www3.telus.net/tinkernet/mockup/mockup.html

mockup:
http://www3.telus.net/tinkernet/mockup/mockup.jpg

Check your (X)HTML with http://validator.w3.org/ and your CSS with
http://jigsaw.w3.org/css-validator/validator-uri.html

BTW. The background image (bg-about.jpg) is 262 kB and that far to
much even for broadband users.

--
/Arne

Proud User of Mozilla Suite. Get your free copy here:
*English* http://www.mozilla.org/products/mozilla1.x/
*Svenska* http://www.mozilla.se/mozilla.shtml

[me]

"Joe" <ex*******@telus.net> wrote in message
news:fmw%d.53640$ZO2.44862@edtnps84...

I'm designing a company website. I'm relatively new to CSS and I'm having
trouble creating what seems to me a very simple design:

- body background: fixed full page image
- banner: fixed, 100 pixels high, full-width, transparent background
- nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
semi-transparent tiled image background
- content box: scrolling, auto height, auto width, opaque text,
semi-transparent tiled image background
- footer: fixed, 30 px high, full width, transparent background

Here is as far as I could get in the actual design:
http://www3.telus.net/tinkernet/mockup/mockup.html

mockup:
http://www3.telus.net/tinkernet/mockup/mockup.jpg

Due to the inherent limitations of fluid design with CSS positioning it will
be impossible for you to create an exact match of your mock-up, at least in
IE on Windows. Since this is a company site I expect it is a requirement
that your site work in IE on Windows. It is however quite easy to do what
you want with tables or (my least favorite design method) frames. If you're
interested let me know and I will post code.
Good Luck,
me

[Beauregard T. Shagnasty]

me wrote:

Due to the inherent limitations of fluid design with CSS
positioning it will be impossible for you to create an exact match
of your mock-up, at least in IE on Windows.
It is certainly possible, and even easy, to do a fluid design with
CSS, even in IE.
Since this is a company site I expect it is a requirement that your
site work in IE on Windows. It is however quite easy to do what
you want with tables or (my least favorite design method) frames.
Or CSS.
If you're interested let me know and I will post code.

Probably not necessary.

To Joe: here is a mess of templates, one of which is bound to fit
your needs.
http://nemesis1.f2o.org/templates.php
This one may work:
http://www.benmeadowcroft.com/webdev...ft-column.html

Make a copy of it and experiment.

--
-bts
-This space intentionally left blank.

[me]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:3a*************@individual.net...
[snip]

Thanks for taking the bait.

To Joe: here is a mess of templates, one of which is bound to fit
your needs.
http://nemesis1.f2o.org/templates.php
Close but no cigar, not according to his mockup.
This one may work:
http://www.benmeadowcroft.com/webdev...ft-column.html

Ditto above. :-(
Signed,
me

[Beauregard T. Shagnasty]

me wrote:

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in
message news:3a*************@individual.net... [snip]

Thanks for taking the bait.

Tasty bait...

To Joe: here is a mess of templates, one of which is bound to
fit your needs. http://nemesis1.f2o.org/templates.php

Close but no cigar, not according to his mockup.

I'm sure you expected one of them to contain Joe's background picture?

This one may work:
http://www.benmeadowcroft.com/webdev...ft-column.html

Ditto above. :-(

Ben's template would work exceptionally well with Joe's design. It has
a content block, a left menu, and a background image. Content and menu
are in proper linear order in the HTML as well.

Joe, if you're still reading, all you would need to do is substitute
your content and colors and images. Further, it has an excellent print
stylesheet. Give it a try.

It even works in IE.

--
-bts
-This space intentionally left blank.

[me]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:3a*************@individual.net...

me wrote:

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in
message news:3a*************@individual.net... [snip]

Thanks for taking the bait.

Tasty bait...

To Joe: here is a mess of templates, one of which is bound to
fit your needs. http://nemesis1.f2o.org/templates.php

Close but no cigar, not according to his mockup.

I'm sure you expected one of them to contain Joe's background picture?

This one may work:
http://www.benmeadowcroft.com/webdev...ft-column.html

Ditto above. :-(

Ben's template would work exceptionally well with Joe's design. It has
a content block, a left menu, and a background image. Content and menu
are in proper linear order in the HTML as well.

Joe, if you're still reading, all you would need to do is substitute
your content and colors and images. Further, it has an excellent print
stylesheet. Give it a try.

It even works in IE.

Nope, sorry, doesn't address the OP's problem, not if he wants an exact
match to his mock up.

actual design:
http://www3.telus.net/tinkernet/mockup/mockup.html

mockup:
http://www3.telus.net/tinkernet/mockup/mockup.jpg
Look again and put your glasses on this time.
Signed,
me

[Beauregard T. Shagnasty]

me wrote:

Nope, sorry, doesn't address the OP's problem, not if he wants an
exact match to his mock up.

You expect someone to hand him finished work?

Joe could fiddle with Ben's template - while learning something - and
have a nice page in a half-hour or so.

--
-bts
-This space intentionally left blank.

[me]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:3a*************@individual.net...

me wrote:

Nope, sorry, doesn't address the OP's problem, not if he wants an
exact match to his mock up.

You expect someone to hand him finished work?

Joe could fiddle with Ben's template - while learning something - and
have a nice page in a half-hour or so.

Maybe but it won't be an exact match of his mockup. CSS positioning can't
match the OP's mockup exactly. You're in denial.
Signed,
me

[Beauregard T. Shagnasty]

me wrote:

Maybe but it won't be an exact match of his mockup. CSS positioning
can't match the OP's mockup exactly.
Right. It will be better.
You're in denial.

<ROF,L>

--
-bts
-This space intentionally left blank.

[me]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:3a*************@individual.net...

me wrote:

Maybe but it won't be an exact match of his mockup. CSS positioning
can't match the OP's mockup exactly.

Right. It will be better.

You're in denial.

<ROF,L>

He didn't ask for what you call "better" he asked for an exact match to his
mockup. If I suggested what I thought was better (fixed fonts, non-fluid
etc) some crazie would be flaming me right now. :-0
Signed,
me

[C A Upsdell]

me wrote:

He didn't ask for what you call "better" he asked for an exact match to his
mockup. If I suggested what I thought was better (fixed fonts, non-fluid
etc) some crazie would be flaming me right now. :-0

In point of fact the OP did not ask how to make an exact match. He
asked for "help with is making the page look like my mockup".

[kchayka]

me wrote:

CSS positioning can't match the OP's mockup exactly.

Just because you can't grasp the concept that web pages don't have to be
pixel-perfect, doesn't mean no one else can.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[me]

"kchayka" <us****@c-net.us> wrote in message
news:3a*************@individual.net...

me wrote:

CSS positioning can't match the OP's mockup exactly.

Just because you can't grasp the concept that web pages don't have to be
pixel-perfect, doesn't mean no one else can.

The OP said "I really need help with is making the page look like my mockup"
hence my answer. But IMO pixel-perfect is much nicer. :-)
Signed,
me

[me]

"C A Upsdell" <""cupsdellXXX\"@-@[e-mail]"> wrote in message
news:SO********************@rogers.com...

me wrote:

He didn't ask for what you call "better" he asked for an exact match to his mockup. If I suggested what I thought was better (fixed fonts, non-fluid
etc) some crazie would be flaming me right now. :-0

In point of fact the OP did not ask how to make an exact match. He
asked for "help with is making the page look like my mockup".

The OP said "I really need help with is making the page look like my mockup"
hence my answer. We just have a different interpretation of his request.
Signed,
me

[Joe]

Those templates aren't quite what I was looking for , since I only want the
content box to scroll. I had a hunch that I would have to resort to tables
to get what I want and it was even suggested to me in a forum that I split
the background into slices to create the appearance of transparency, so that
is what I will try next. I would definately appreciate your table code, me.

Designing layouts with HTML was so akward and CSS was a step in the right
direction but it still has so many limitations. I look forward to the day
when web design will be as user friendly and limitless as say, creating
something in Pagemaker or something.

[Joe]

Gah!

Is it possible to get the content to stay within the page and scroll with
tables?

<table height="100%">
<td style="overflow: auto;"> very long text over a page a long ... </td>
</table>

I am trying to implement my original layout with tables

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Joe wrote:

Gah!

Is it possible to get the content to stay within the page and scroll with
tables?

<table height="100%">
<td style="overflow: auto;"> very long text over a page a long ... </td>
</table>

I am trying to implement my original layout with tables

Bad idea, but propably not worst, as I assume you used to use frames.
Forgot tables as well as overflow auto. Especially forget about using
them together.

Tables are least supported part of HTML
Overflow is worst supported part of CSS

Put them together, and you get really interesting results...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Joe]

I just found a template in dreamweaver, modified it a bit, and it looks
hopeful. Now if I can just figure out how to get the footer in there ....

http://www3.telus.net/tinkernet/mockup/temp.htm
http://www3.telus.net/tinkernet/mockup/2col_leftNav.css

[Joe]

No, the original used DIV's (take a look at the original post)

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.individual.ne t...

in comp.infosystems.www.authoring.stylesheets, Joe wrote:

Gah!

Is it possible to get the content to stay within the page and scroll with
tables?

<table height="100%">
<td style="overflow: auto;"> very long text over a page a long ... </td>
</table>

I am trying to implement my original layout with tables

Bad idea, but propably not worst, as I assume you used to use frames.
Forgot tables as well as overflow auto. Especially forget about using
them together.

Tables are least supported part of HTML
Overflow is worst supported part of CSS

Put them together, and you get really interesting results...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Joe wrote:

No, the original used DIV's (take a look at the original post)

Then why you want to do it with tables? It is not going to work any
better, and now when I look I see you have gotten many suitable answers
already?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Joe wrote:

I just found a template in dreamweaver, modified it a bit, and it looks
hopeful. Now if I can just figure out how to get the footer in there ....

http://www3.telus.net/tinkernet/mockup/temp.htm
Horrible background, get rid of it or adjust conterast
http://www3.telus.net/tinkernet/mockup/2col_leftNav.css

Will break on small window sizes as you use persentege widths. It is easy
to add footer:

<div class="foo">Footer</div>

..foo {clear:both}

Notice that fixed left navigation won't fit on low browser windows.

You can't[1] have navigation on left with sized as em, full width footer
and navigation below content in html.

[1] practically, there is at least 2 approaches that work on 2 browsers,
but won't on others...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Joe]

If you know of a way that I can achieve what I described in my original
post, please please please demonstrate it to me, because I have not yet been
able to make it work.
"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.individual.ne t...

in comp.infosystems.www.authoring.stylesheets, Joe wrote:

No, the original used DIV's (take a look at the original post)

Then why you want to do it with tables? It is not going to work any
better, and now when I look I see you have gotten many suitable answers
already?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Joe wrote:

I'm designing a company website. I'm relatively new to CSS and I'm having
trouble creating what seems to me a very simple design:

- body background: fixed full page image
Easy, but don't assume your background image is big enough
- banner: fixed, 100 pixels high, full-width, transparent background
Easy, but don't assume text will fit in 100px
- nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
semi-transparent tiled image background
Easy, but don't assume text will fit in 200px
- content box: scrolling, auto height, auto width, opaque text,
semi-transparent tiled image background
Easy, but remember that you are cutting away lots of useful screenspace
- footer: fixed, 30 px high, full width, transparent background
Not bad, but again, yout text might not fit
Here is as far as I could get in the actual design:
http://www3.telus.net/tinkernet/mockup/mockup.html

Works as you describe? Where is your problem? Propably that IE don't
support it? Why didn't you say it?

Use max-width workaround and fixed positioning workaround, might work.

Or better, forget idea of scrolling content area, and fixed left and top
areas. It is better for usability and accessibility. Additional bonus is
that it is easy.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Joe]

Thank you for the lovely tips and stuff, but all I want to do is make my
page look like the mockup. If you know how, then please just post a
skeleton html.

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.individual.ne t...

in comp.infosystems.www.authoring.stylesheets, Joe wrote:

I'm designing a company website. I'm relatively new to CSS and I'm
having
trouble creating what seems to me a very simple design:

- body background: fixed full page image

Easy, but don't assume your background image is big enough

- banner: fixed, 100 pixels high, full-width, transparent background

Easy, but don't assume text will fit in 100px

- nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
semi-transparent tiled image background

Easy, but don't assume text will fit in 200px

- content box: scrolling, auto height, auto width, opaque text,
semi-transparent tiled image background

Easy, but remember that you are cutting away lots of useful screenspace

- footer: fixed, 30 px high, full width, transparent background

Not bad, but again, yout text might not fit

Here is as far as I could get in the actual design:
http://www3.telus.net/tinkernet/mockup/mockup.html

Works as you describe? Where is your problem? Propably that IE don't
support it? Why didn't you say it?

Use max-width workaround and fixed positioning workaround, might work.

Or better, forget idea of scrolling content area, and fixed left and top
areas. It is better for usability and accessibility. Additional bonus is
that it is easy.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Windsun]

You can't do it with HTML.

-------------------------------------------------------------------------------
"Joe" <ex*******@telus.net> wrote in message
news:p3r0e.109542$gJ3.25096@clgrps13...

Thank you for the lovely tips and stuff, but all I want to do is make my
page look like the mockup. If you know how, then please just post a
skeleton html.

[Joe]

pardon me. HTML + CSS

"Windsun" <wi******@earthlink.net> wrote in message
news:7V*****************@newsread3.news.pas.earthl ink.net...

You can't do it with HTML.

-------------------------------------------------------------------------------
"Joe" <ex*******@telus.net> wrote in message
news:p3r0e.109542$gJ3.25096@clgrps13...

Thank you for the lovely tips and stuff, but all I want to do is make my
page look like the mockup. If you know how, then please just post a
skeleton html.

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Joe wrote:

Thank you for the lovely tips and stuff, but all I want to do is make my
page look like the mockup.
Don't top post. This is not help desk. Plonk.

Here is as far as I could get in the actual design:
http://www3.telus.net/tinkernet/mockup/mockup.html

Works as you describe?
In Opera. I couldn't find single flaw. Exept of course the ones I already
mentioned.
Where is your problem?

My question which you never answered
If you know how, then please just post a
skeleton html.

I have other things to do. Situation might change if money is involved,
try email. But I still think your layout idea is broken...
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Joe]

> Don't top post. This is not help desk. Plonk.
I don't know what you're talking about.

Where is your problem?
Works as you describe?

no it doesn't. read the decription. look at the jpeg.

If you know how, then please just post a skeleton html.

I have other things to do. Situation might change if money is involved,

Well, I have offered two different approaches to start with but you haven't
offered any help with them. You claim the solution is easy, yet you
consistently ignore my original problem, and essentially tell me "you don't
want that. This is what you really want". I don't need that kind of help.

[me]

"Joe" <ex*******@telus.net> wrote in message
news:fmw%d.53640$ZO2.44862@edtnps84...

I'm designing a company website. I'm relatively new to CSS and I'm having
trouble creating what seems to me a very simple design:

- body background: fixed full page image
- banner: fixed, 100 pixels high, full-width, transparent background
- nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
semi-transparent tiled image background
- content box: scrolling, auto height, auto width, opaque text,
semi-transparent tiled image background
- footer: fixed, 30 px high, full width, transparent background

Here is as far as I could get in the actual design:
http://www3.telus.net/tinkernet/mockup/mockup.html

mockup:
http://www3.telus.net/tinkernet/mockup/mockup.jpg

The primary constraints on your goal are that you wish to have a BG image
for the whole page and a scrollable content area. This can be achieved but
not with a fluid design.

In the following example I've used fixed layout positioned from the top left
of the browser window to achieve what I believe is suitable for your
purposes. I chose to fit my design in a 780 pixel wide browser window (to
leave room for a right hand scroll bar), I then set all layers to match that
width (or combined width), resize them to suit your needs. I placed my style
sheet in the head of the document for simplicity but you could link to it if
you prefer and doing so may well be easier in the long run.

You'll also need to use a fixed font size to fully achieve your design goal.
With minor modification the following can be made to match your mockup. Open
a new file in Dreamweaver, clear out the code, paste in the following (in
code view), then apply any styles you need. Also make sure to have the
layers, properties and styles boxes/pallets open for speedy use and check
the box in the layers pallet to "Prevent Overlaps" (not required but
useful). You may also need to tidy up line wraps incurred here. Use the
following in good health:
Good Luck,
me

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body { background-image: url(antique_satin_cloth.jpg); background-repeat:
no-repeat; background-position: left top}
..masthead { border-color: black black #000000; border-style: solid;
border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px;
border-left-width: 0px}
..nav { border-color: black black black #000000; border-style: solid;
border-top-width: 0px; border-right-width: 1px; border-bottom-width: 0px;
border-left-width: 0px}
..footer { border-color: #000000 black black; border-style: solid;
border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px;
border-left-width: 0px}
-->
</style>
</head>

<body bgcolor="#FFFFFF">
<div id="masthead" style="position:absolute; width:780px; height:102px;
z-index:3; left: 0; top: 0" class="masthead">Mast
Head </div>

<div id="nav" style="position:absolute; width:200px; height:350px;
z-index:2; left: 0px; top: 102px" class="nav">
<p>link</p>
<p>link</p>
<p>link</p>
<p>link</p>
<p>link</p>
<p>link</p>
<p>link</p>
<p>link</p>
<p>link</p>
</div>
<div id="content" style="position:absolute; width:580px; height:336px;
z-index:4; left: 200px; top: 102px; overflow: auto">through
a top-down, proactive approach we can remain customer focused and
goal-directed,
innovate and be an inside-out organization which facilitates sticky
web-readiness
transforming turnkey eyeballs to brand 24/365 paradigms with benchmark
turnkey
channels implementing viral e-services and dot-com action-items while we
take
that action item off-line and raise a red flag and remember touch base as
you
think about the red tape outside of the box and seize B2B e-tailers and
re-envisioneer
innovative partnerships that evolve dot-com initiatives delivering
synergistic
earballs to incentivize B2B2C deliverables that leverage magnetic
solutions
to synergize clicks-and-mortar earballs while facilitating one-to-one
action-items
with revolutionary relationships that deliver viral markets and grow
e-business
supply-chains that expedite seamless relationships and transform back-end
relationships
withthrough a top-down, proactive approach we can remain customer focused
and
goal-directed, innovate and be an inside-out organization which
facilitates
sticky web-readiness transforming turnkey eyeballs to brand 24/365
paradigms
with benchmark turnkey channels implementing viral e-services and dot-com
action-items
while we take that action item off-line and raise a red flag and remember
touch
base as you think about the red tape outside of the box and seize B2B
e-tailers
and re-envisioneer innovative partnerships that evolve dot-com initiatives
delivering
synergistic earballs to incentivize B2B2C deliverables that leverage
magnetic
solutions to synergize clicks-and-mortar earballs while facilitating
one-to-one
action-items with revolutionary relationships that deliver viral markets
and
grow e-business supply-chains that expedite seamless relationships and
transform
back-end relationships withthrough a top-down, proactive approach we can
remain
customer focused and goal-directed, innovate and be an inside-out
organization
which facilitates sticky web-readiness transforming turnkey </div>
<div id="footer" style="position:absolute; width:780px; height:1px;
z-index:1; left: 0px; top: 452px" class="footer">Footer</div>
</body>
</html>

[Joe]

> "Joe" <ex*******@telus.net> wrote in message

news:fmw%d.53640$ZO2.44862@edtnps84...

I'm designing a company website. I'm relatively new to CSS and I'm
having
trouble creating what seems to me a very simple design:

- body background: fixed full page image
- banner: fixed, 100 pixels high, full-width, transparent background
- nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
semi-transparent tiled image background
- content box: scrolling, auto height, auto width, opaque text,
semi-transparent tiled image background
- footer: fixed, 30 px high, full width, transparent background

Here is as far as I could get in the actual design:
http://www3.telus.net/tinkernet/mockup/mockup.html

mockup:
http://www3.telus.net/tinkernet/mockup/mockup.jpg

The primary constraints on your goal are that you wish to have a BG image
for the whole page and a scrollable content area. This can be achieved but
not with a fluid design.

Making the structure of the page scale nicely to any window size (I think
that's what you mean by fluid design) was supposed to be one of the
highlights of this layout, but I give up. I even tried slicing up the
background but nothing has worked. This is my first CSS page and I've
already stumbled on an "impossible layout". I'll just a start a new concept
from scratch with the new limitations in mind.
It seems to me that CSS has helped to pretty up HTML a little bit, but is
otherwise inept at creating flexible infrastructure or anything practical,
and has a far from intuitive design process. People have had to invent so
many hacks and workarounds just to get it to do what they want, and
different browsers cannot even agree on how to render it. Not to mention
all the bugs, and the fact that apps like Dreamweaver and Frontpage don't
even seamlessly integrate CSS.
Nonetheless, thank you all for the help.